<template>
  <Container bg-color="#36434D" class="wrap-container">
    <div class="banner4 common">
      <div class="title">
        <div class="number-icon">
          <svg
            width="131"
            height="92"
            viewBox="0 0 131 92"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <mask
              id="path-1-outside-1_122_41"
              maskUnits="userSpaceOnUse"
              x="-2"
              y="-2"
              width="135"
              height="96"
              fill="black"
            >
              <rect fill="white" x="-2" y="-2" width="135" height="96" />
              <path
                d="M29.736 91.408C9.93867 91.408 0.0400004 80.6133 0.0400004 59.024V31.632C0.0400004 21.3067 2.55733 13.4987 7.592 8.20799C12.6267 2.91733 20.008 0.271996 29.736 0.271996C39.6347 0.271996 47.0587 2.91733 52.008 8.20799C56.9573 13.4987 59.432 21.3067 59.432 31.632V59.024C59.432 69.6907 56.9573 77.7547 52.008 83.216C47.0587 88.6773 39.6347 91.408 29.736 91.408ZM29.736 76.816C34.4293 76.816 37.7573 75.3227 39.72 72.336C41.6827 69.264 42.664 64.3573 42.664 57.616V34.064C42.664 27.3227 41.64 22.4587 39.592 19.472C37.6293 16.4853 34.344 14.992 29.736 14.992C25.128 14.992 21.8427 16.4853 19.88 19.472C17.9173 22.4587 16.936 27.3227 16.936 34.064V57.616C16.936 64.3573 17.9173 69.264 19.88 72.336C21.8427 75.3227 25.128 76.816 29.736 76.816ZM100.962 91.408C91.49 91.408 84.2367 89.36 79.202 85.264C74.1673 81.0827 71.65 75.1093 71.65 67.344V65.936H87.266V66.96C87.266 70.288 88.418 72.848 90.722 74.64C93.026 76.3467 96.354 77.2 100.706 77.2C104.973 77.2 108.258 76.176 110.562 74.128C112.866 71.9947 114.018 69.0507 114.018 65.296V63.376C114.018 59.3653 112.781 56.4213 110.306 54.544C107.917 52.5813 104.247 51.6 99.298 51.6H94.306V37.392H99.17C103.522 37.392 106.807 36.4533 109.026 34.576C111.33 32.6987 112.482 30.0107 112.482 26.512V24.976C112.482 21.648 111.415 19.088 109.282 17.296C107.149 15.4187 104.119 14.48 100.194 14.48C96.1833 14.48 93.1113 15.376 90.978 17.168C88.8447 18.96 87.778 21.52 87.778 24.848V26H72.418V24.848C72.418 16.912 74.85 10.8533 79.714 6.672C84.578 2.40533 91.5327 0.271996 100.578 0.271996C109.453 0.271996 116.407 2.31999 121.442 6.41599C126.477 10.512 128.994 16.144 128.994 23.312V24.976C128.994 29.072 127.927 32.656 125.794 35.728C123.746 38.8 120.717 41.232 116.706 43.024C121.229 44.56 124.642 47.0773 126.946 50.576C129.335 54.0747 130.53 58.3413 130.53 63.376V65.424C130.53 73.4453 127.842 79.8027 122.466 84.496C117.175 89.104 110.007 91.408 100.962 91.408Z"
              />
            </mask>
            <path
              d="M7.592 8.20799L6.14317 6.82927L7.592 8.20799ZM52.008 8.20799L53.4685 6.84168H53.4685L52.008 8.20799ZM52.008 83.216L50.526 81.873H50.526L52.008 83.216ZM39.72 72.336L41.3914 73.4344L41.3985 73.4236L41.4054 73.4128L39.72 72.336ZM39.592 19.472L37.9206 20.5704L37.9314 20.5868L37.9425 20.6031L39.592 19.472ZM19.88 19.472L21.5514 20.5704L21.5514 20.5704L19.88 19.472ZM19.88 72.336L18.1946 73.4128L18.2015 73.4236L18.2086 73.4344L19.88 72.336ZM29.736 89.408C20.1923 89.408 13.389 86.8141 8.93807 81.9603C4.45703 77.0736 2.04 69.5513 2.04 59.024H-1.96C-1.96 70.0861 0.572304 78.7557 5.98993 84.6637C11.4376 90.6045 19.4823 93.408 29.736 93.408V89.408ZM2.04 59.024V31.632H-1.96V59.024H2.04ZM2.04 31.632C2.04 21.6068 4.48376 14.3755 9.04083 9.58672L6.14317 6.82927C0.630904 12.6218 -1.96 21.0065 -1.96 31.632H2.04ZM9.04083 9.58672C13.5848 4.81174 20.3663 2.272 29.736 2.272V-1.728C19.6497 -1.728 11.6686 1.02292 6.14317 6.82927L9.04083 9.58672ZM29.736 2.272C39.291 2.272 46.0991 4.81915 50.5475 9.57431L53.4685 6.84168C48.0183 1.0155 39.9784 -1.728 29.736 -1.728V2.272ZM50.5475 9.57431C55.0268 14.3625 57.432 21.5987 57.432 31.632H61.432C61.432 21.0146 58.8879 12.6348 53.4685 6.84168L50.5475 9.57431ZM57.432 31.632V59.024H61.432V31.632H57.432ZM57.432 59.024C57.432 69.4135 55.0193 76.9148 50.526 81.873L53.49 84.559C58.8953 78.5945 61.432 69.9678 61.432 59.024H57.432ZM50.526 81.873C46.0734 86.7862 39.2728 89.408 29.736 89.408V93.408C39.9965 93.408 48.0439 90.5685 53.49 84.559L50.526 81.873ZM29.736 78.816C34.8671 78.816 38.9459 77.1558 41.3914 73.4344L38.0486 71.2376C36.5688 73.4895 33.9916 74.816 29.736 74.816V78.816ZM41.4054 73.4128C43.684 69.8463 44.664 64.462 44.664 57.616H40.664C40.664 64.2526 39.6814 68.6817 38.0346 71.2592L41.4054 73.4128ZM44.664 57.616V34.064H40.664V57.616H44.664ZM44.664 34.064C44.664 27.2172 43.6424 21.8424 41.2415 18.3409L37.9425 20.6031C39.6376 23.0749 40.664 27.4281 40.664 34.064H44.664ZM41.2634 18.3736C38.8249 14.6628 34.7983 12.992 29.736 12.992V16.992C33.8897 16.992 36.4338 18.3078 37.9206 20.5704L41.2634 18.3736ZM29.736 12.992C24.6737 12.992 20.6471 14.6628 18.2086 18.3736L21.5514 20.5704C23.0382 18.3078 25.5823 16.992 29.736 16.992V12.992ZM18.2086 18.3736C15.9131 21.8667 14.936 27.226 14.936 34.064H18.936C18.936 27.4194 19.9215 23.0506 21.5514 20.5704L18.2086 18.3736ZM14.936 34.064V57.616H18.936V34.064H14.936ZM14.936 57.616C14.936 64.462 15.916 69.8463 18.1946 73.4128L21.5654 71.2592C19.9186 68.6817 18.936 64.2526 18.936 57.616H14.936ZM18.2086 73.4344C20.6471 77.1452 24.6737 78.816 29.736 78.816V74.816C25.5823 74.816 23.0382 73.5002 21.5514 71.2376L18.2086 73.4344ZM79.202 85.264L77.9242 86.8026L77.932 86.809L77.9398 86.8154L79.202 85.264ZM71.65 65.936V63.936H69.65V65.936H71.65ZM87.266 65.936H89.266V63.936H87.266V65.936ZM90.722 74.64L89.4941 76.2187L89.5127 76.2331L89.5315 76.2471L90.722 74.64ZM110.562 74.128L111.891 75.6228L111.906 75.6093L111.921 75.5955L110.562 74.128ZM110.306 54.544L109.037 56.0895L109.066 56.114L109.097 56.1374L110.306 54.544ZM94.306 51.6H92.306V53.6H94.306V51.6ZM94.306 37.392V35.392H92.306V37.392H94.306ZM109.026 34.576L107.763 33.0255L107.748 33.0372L107.734 33.0492L109.026 34.576ZM109.282 17.296L107.961 18.7974L107.978 18.8126L107.996 18.8274L109.282 17.296ZM90.978 17.168L92.2644 18.6994H92.2644L90.978 17.168ZM87.778 26V28H89.778V26H87.778ZM72.418 26H70.418V28H72.418V26ZM79.714 6.672L81.0178 8.18863L81.0254 8.18211L81.0329 8.17551L79.714 6.672ZM121.442 6.41599L122.704 4.86457V4.86457L121.442 6.41599ZM125.794 35.728L124.151 34.5872L124.14 34.6028L124.13 34.6186L125.794 35.728ZM116.706 43.024L115.89 41.198L111.235 43.278L116.063 44.9178L116.706 43.024ZM126.946 50.576L125.276 51.676L125.285 51.69L125.294 51.7039L126.946 50.576ZM122.466 84.496L123.78 86.0042L123.781 86.0026L122.466 84.496ZM100.962 89.408C91.7448 89.408 85.0103 87.4111 80.4642 83.7126L77.9398 86.8154C83.463 91.3089 91.2352 93.408 100.962 93.408V89.408ZM80.4798 83.7254C75.9895 79.9962 73.65 74.6375 73.65 67.344H69.65C69.65 75.5812 72.3452 82.1692 77.9242 86.8026L80.4798 83.7254ZM73.65 67.344V65.936H69.65V67.344H73.65ZM71.65 67.936H87.266V63.936H71.65V67.936ZM85.266 65.936V66.96H89.266V65.936H85.266ZM85.266 66.96C85.266 70.807 86.6304 73.9913 89.4941 76.2187L91.9499 73.0613C90.2056 71.7047 89.266 69.769 89.266 66.96H85.266ZM89.5315 76.2471C92.3171 78.3105 96.135 79.2 100.706 79.2V75.2C96.573 75.2 93.7349 74.3828 91.9125 73.0329L89.5315 76.2471ZM100.706 79.2C105.274 79.2 109.101 78.1028 111.891 75.6228L109.233 72.6332C107.415 74.2492 104.671 75.2 100.706 75.2V79.2ZM111.921 75.5955C114.713 73.0101 116.018 69.4895 116.018 65.296H112.018C112.018 68.6119 111.019 70.9792 109.203 72.6605L111.921 75.5955ZM116.018 65.296V63.376H112.018V65.296H116.018ZM116.018 63.376C116.018 58.9391 114.628 55.3122 111.515 52.9506L109.097 56.1374C110.934 57.5304 112.018 59.7915 112.018 63.376H116.018ZM111.575 52.9985C108.669 50.6109 104.45 49.6 99.298 49.6V53.6C104.045 53.6 107.165 54.5518 109.037 56.0895L111.575 52.9985ZM99.298 49.6H94.306V53.6H99.298V49.6ZM96.306 51.6V37.392H92.306V51.6H96.306ZM94.306 39.392H99.17V35.392H94.306V39.392ZM99.17 39.392C103.768 39.392 107.596 38.4059 110.318 36.1028L107.734 33.0492C106.019 34.5008 103.276 35.392 99.17 35.392V39.392ZM110.289 36.1265C113.144 33.8002 114.482 30.4932 114.482 26.512H110.482C110.482 29.5281 109.516 31.5971 107.763 33.0255L110.289 36.1265ZM114.482 26.512V24.976H110.482V26.512H114.482ZM114.482 24.976C114.482 21.184 113.243 18.0112 110.568 15.7646L107.996 18.8274C109.588 20.1648 110.482 22.112 110.482 24.976H114.482ZM110.603 15.7946C107.986 13.4914 104.42 12.48 100.194 12.48V16.48C103.819 16.48 106.311 17.3459 107.961 18.7974L110.603 15.7946ZM100.194 12.48C95.9154 12.48 92.3148 13.4331 89.6916 15.6366L92.2644 18.6994C93.9079 17.3189 96.4513 16.48 100.194 16.48V12.48ZM89.6916 15.6366C87.0171 17.8832 85.778 21.056 85.778 24.848H89.778C89.778 21.984 90.6723 20.0368 92.2644 18.6994L89.6916 15.6366ZM85.778 24.848V26H89.778V24.848H85.778ZM87.778 24H72.418V28H87.778V24ZM74.418 26V24.848H70.418V26H74.418ZM74.418 24.848C74.418 17.3446 76.6982 11.9019 81.0178 8.18863L78.4102 5.15536C73.0018 9.80472 70.418 16.4794 70.418 24.848H74.418ZM81.0329 8.17551C85.4095 4.33633 91.8256 2.272 100.578 2.272V-1.728C91.2398 -1.728 83.7465 0.474329 78.3951 5.16848L81.0329 8.17551ZM100.578 2.272C109.161 2.272 115.613 4.2523 120.18 7.96741L122.704 4.86457C117.201 0.387686 109.745 -1.728 100.578 -1.728V2.272ZM120.18 7.96741C124.695 11.6408 126.994 16.6744 126.994 23.312H130.994C130.994 15.6136 128.258 9.38323 122.704 4.86457L120.18 7.96741ZM126.994 23.312V24.976H130.994V23.312H126.994ZM126.994 24.976C126.994 28.7048 126.03 31.8821 124.151 34.5872L127.437 36.8688C129.825 33.4299 130.994 29.4391 130.994 24.976H126.994ZM124.13 34.6186C122.328 37.3211 119.622 39.5304 115.89 41.198L117.522 44.85C121.811 42.9336 125.164 40.2789 127.458 36.8374L124.13 34.6186ZM116.063 44.9178C120.226 46.3318 123.25 48.5999 125.276 51.676L128.616 49.476C126.034 45.5547 122.231 42.7882 117.349 41.1302L116.063 44.9178ZM125.294 51.7039C127.417 54.8116 128.53 58.6664 128.53 63.376H132.53C132.53 58.0162 131.254 53.3377 128.598 49.4481L125.294 51.7039ZM128.53 63.376V65.424H132.53V63.376H128.53ZM128.53 65.424C128.53 72.9478 126.035 78.7254 121.151 82.9894L123.781 86.0026C129.649 80.8799 132.53 73.9429 132.53 65.424H128.53ZM121.152 82.9878C116.321 87.1959 109.668 89.408 100.962 89.408V93.408C110.347 93.408 118.03 91.0121 123.78 86.0042L121.152 82.9878Z"
              fill="url(#paint0_linear_122_41)"
              mask="url(#path-1-outside-1_122_41)"
            />
            <defs>
              <linearGradient
                id="paint0_linear_122_41"
                x1="113"
                y1="-25"
                x2="116.049"
                y2="89.9191"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="white" />
                <stop offset="0.71" stop-color="white" stop-opacity="0" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="text">{{ $t("content.home.banner4.title") }}</div>
        <div class="en">{{ $t("content.home.banner4.sub_title") }}</div>
      </div>
      <div class="pc-box">
        <div class="card_img" ref="cardImgs">
          <template v-if="hotCourseData">
            <div
              class="card_img-item"
              :class="index == 0 ? 'flex-1 ' : ''"
              v-for="(item, index) in hotCourseData"
              :key="index"
            >
              <img :src="item.single_pic" class="bg_1" alt="" />
              <img :src="item.single_pic2" class="bg_2" alt="" />
              <div class="title">
                <div class="text">{{ item.title }}</div>
                <div class="desc">{{ item.type_title }}</div>
              </div>
              <div class="hover-content">
                <div class="title">
                  <div class="text">{{ item.title }}</div>
                  <div class="desc">{{ item.type_title }}</div>
                </div>
                <div class="divider"></div>
                <div class="introduce">{{ item.descr }}</div>
                <a class="btn btn-white btn-round" @click="openUrl(item.url)">{{
                  $t("btnText.view_course_detail")
                }}</a>
              </div>
            </div>
          </template>
          <template v-else>
            <div
              class="card_img-item skeleton"
              v-for="i in 4"
              :key="i"
              :class="i == 1 ? 'flex-1' : ''"
            >
              <Skeleton height="440px" width="100%"></Skeleton>
            </div>
          </template>
        </div>
      </div>
      <div class="mobile-box" v-if="hotCourseData">
        <Swiper
          :slidesPerView="1.2"
          :spaceBetween="20"
          @slideChange="onSlideChange"
        >
          <SwiperSlide v-for="(item, index) in hotCourseData" :key="index">
            <div
              class="hover-content"
              :style="{ backgroundImage: `url(${item.single_pic})` }"
            >
              <div class="content">
                <div class="title">
                  <div class="text">{{ item.title }}</div>
                  <div class="desc">{{ item.type_title }}</div>
                </div>
                <div class="divider-line"></div>
                <div class="introduce no-scrollbar">{{ item.descr }}</div>
              </div>
              <div>
                <a class="btn btn-white btn-round" @click="openUrl(item)">{{
                  $t("btnText.view_course_detail")
                }}</a>
              </div>
            </div>
          </SwiperSlide>
          <div class="swiper-dots">
            <Banner4SwiperControls :currentSwiperIndex="currentSwiperIndex" />
          </div>
        </Swiper>
      </div>
      <div class="mobile-skeleton" v-else>
        <div class="swiper_skeleton">
          <Skeleton
            v-for="i in 2"
            :key="i"
            width="1400px"
            height="1900px"
          ></Skeleton>
        </div>
        <div class="swiper_skeleton_dots">
          <Skeleton
            v-for="i in 4"
            :key="i"
            round
            width="123px"
            height="20px"
          ></Skeleton>
        </div>
      </div>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { postHotCourse } from "../../../api/banner";
import { banner4Data } from "./data";
import Banner4SwiperControls from "./Banner4SwiperControls.vue";
import { ref, onBeforeMount, nextTick } from "vue";
const openUrl = (item: any) => {
  let url = item;
  if (url.includes("https") || url.includes("http")) {
    window.open(url, "__blank");
  } else {
    window.open(`https://${url}`, "__blank");
  }
};

let cardImgs = ref();
const bindCardImgsClass = () => {
  if (!cardImgs.value) return;
  let cardItemList = (cardImgs.value as HTMLDivElement).querySelectorAll(
    ".card_img-item"
  );
  cardItemList.forEach((item: Element) => {
    item.addEventListener("mouseenter", () => {
      removeClass();
      item.classList.add("flex-1");
    });
  });
  function removeClass() {
    cardItemList.forEach((item: Element) => {
      item.classList.remove("flex-1");
    });
  }
};

const hotCourseData = ref();
const getHotCourseData = async () => {
  let res = await postHotCourse();
  if (res.code === 200) {
    hotCourseData.value = res.data;
    nextTick(() => {
      bindCardImgsClass();
    });
  }
};
getHotCourseData();

// 轮播图
let currentSwiperIndex = ref(0);
const onSlideChange = (swiper: any) => {
  currentSwiperIndex.value = swiper.realIndex;
};
</script>
<style scoped lang="less">
@import url("./common.less");
@import url("./media-banner4.less");
.panel.active {
  flex: 5;
}
.mobile-box {
  display: none;
  .hover-content {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 123px;
    min-height: 1900px;
    max-height: 1900px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(61, 136, 242, 0.8);
      z-index: 0;
    }
    .content {
      position: relative;
      z-index: 9;
    }
    .title {
      font-size: 92px !important;
      .desc {
        font-size: 61px !important;
      }
    }
    .divider-line {
      width: 819px;
    }
    .introduce {
      color: #fff;
      font-size: 72px !important;
      overflow-y: auto;
      height: 1000px;
      touch-action: auto;
    }
    .btn {
      display: inline-block;
    }
  }
  .swiper-dots {
    margin-top: 164px;
  }
}
.banner4 {
  .title {
    .text {
      color: #fff;
    }
    .en {
      color: rgba(255, 255, 255, 0.6);
    }
  }
  .card_img {
    display: flex;
    gap: 24px;
    .card_img-item {
      position: relative;
      flex: 1;
      height: 440px;
      .bg_2 {
        display: none;
      }
      &.flex-1 {
        .bg_1 {
          display: none;
        }
        .bg_2 {
          display: block;
        }
      }
      &.skeleton {
        &::before,
        &::after {
          display: none;
        }
      }
      &::after,
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9;
      }
      &::before {
        bottom: 96px;
        height: 128px;
        background: linear-gradient(
          0deg,
          rgba(61, 136, 242, 0.8) 0%,
          rgba(61, 136, 242, 0) 100%
        );
      }
      &::after {
        height: 96px;
        background: rgba(61, 136, 242, 0.8);
      }
      &.flex-1 {
        flex: 4;
        .hover-content {
          transform: translateY(0);
        }
        & > .title {
          display: none;
        }
      }
      .title {
        .desc {
          font-size: 14px;
        }
      }
      & > .title {
        font-size: 24px;
        left: 16px;
        bottom: 24px;
      }

      .hover-content {
        z-index: 99;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 48px;
        .title,
        .introduce,
        .title .text {
          color: #f0f0f0 !important;
        }
        .btn,
        .divider {
          background-color: #f0f0f0 !important;
        }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          z-index: -1;
        }
        .divider {
          width: 140px;
          height: 1px;
          background-color: #fff;
          margin: 32px 0;
        }
        .introduce {
          margin-top: 0;
        }
      }
    }
  }
}

.mobile-skeleton {
  .swiper_skeleton {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 82px;
  }
  .swiper_skeleton_dots {
    display: flex;
    gap: 82px;
    margin-top: 150px;
    justify-content: center;
  }
}
</style>
